<template>
  	<div class="orgTree-wrap">
        <el-row>
            <el-col :span="8"  class='input_batch'>
                <el-input placeholder="选择角色" v-model="deptName"></el-input>
                <div class="busi-group">
                    <el-tree class="filter-tree" 
                        :data="groupTree" 
                        :props="defaultProps" 
                        @node-click="treeClick" 
                        default-expand-all 
                        :filter-node-method="filterNode" 
                        :highlight-current="true"
                        ref="tree">
                    </el-tree>
                </div>
            </el-col>
            <el-col :span="16">
                <div class="busi-group">
                    <div class="pub-table gray-table">
                        <el-table :data="tableData" style="width: 100%" height="250">
                            <el-table-column label="角色" prop="name" min-width="200" align="left"></el-table-column>
                            <el-table-column label="操作" width="80" fixed="right">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small" @click.stop="columeHandle(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-col>
        </el-row> 
  	</div>
</template>
<script>
import { getRoleQueryAuth } from "@/service/core/roleConf";
import { transformTozTreeFormat } from "@/utils/Tools";
export default {
    name: 'roelTree', // 左侧角色树-右侧表格组件
	props: {
        treeData: {
            type: Array,
            default() {
                return []
            }
        }
    },
  	data() {
    	return {
			token: this.$store.state.token.token,
			deptName: "",
			defaultProps: {
				children: "children",
				label: "name"
			},
            groupTree: [],
            tableData: [],
		};
  	},
	watch: {
        treeData(data) {
            console.log('反显信息：', data);
            if(data.length > 0) {
                data.map(item => {
                    if(this.tableData.findIndex(v => v.id == item.id) == -1) {
                        this.tableData.push(item);
                    }
                })
            }
        },
		deptName(val) {
			this.$refs.tree.filter(val);
		},
		tableData(val) {
            this.$emit("empowersRole", this.tableData);
		},
	},
	mounted() {
		this.$nextTick(() => {
			this.groupTreeInit();
		});
    },
    beforeDestroy() {
        this.$emit("empowersRole", []);
    },
	methods: {
		groupTreeInit() { // 请求角色树 数据
			let params = { token: this.token, statusId: "ACTIVE" };
			getRoleQueryAuth(params).then(response => {
				if (response.data.code == 1000) {
					var data = response.data.data;
					if (data.length) {
                        data = transformTozTreeFormat(data);
                        this.groupTree.push(...data);
					}
				}
			});
		},
		treeClick(treeNode) { // 机构树点击事件
			var flag = false;
			if (this.tableData.length > 10) {
				this.$notify({
					title: "提示",
					message: "角色选择不能超过10条！",
					type: "warning"
				});
			} else {
                let index = this.tableData.findIndex(v => v.id == treeNode.id);
                if(index == -1) {
                    this.tableData.push(treeNode);
                }
			}
		},
		filterNode(value, data) { // 机构树过滤
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
        },
        columeHandle(row) { // 删除机构
            let index = this.tableData.findIndex(v => v.id == row.id);
            if(index > -1) {
                this.tableData.splice(index, 1);
            }
        },
	}
}
</script>
<style lang="scss" scoped>
.input_batch{
    padding: 0 3px;
    height: 250px;
    border: 1px solid #ebeef5;
    /deep/ .el-input__inner{
        height: 28px;
        line-height: 28px;
    }
}

.busi-group .el-tree {
	height: 200px;
	border: none;
    overflow-y: auto;
}
</style>
